<template>
  <div class="editorBox">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="articleParams.title" name="文章标题" label="文章标题" placeholder="文章标题" v-if="$route.params.type === '1'" :rules="[{ required: true, message: '请填写文章标题' }]" />
        <van-field v-model="articleParams.tagName" is-link readonly name="picker" label="文章类型" v-if="$route.params.type === '1'" :rules="[{ required: true, message: '请填写文章类型' }]" placeholder="请选择文章类型" @click="showPicker = true" />
        <van-popup v-model:show="showPicker" position="bottom">
          <van-picker :columns="$store.state.AdminTagData" value-key="value" @confirm="onConfirm" @cancel="showPicker = false" :default-index="2" />
        </van-popup>
        <van-field v-model="articleParams.des" v-if="false" rows="2" autosize label="文章描述"  type="textarea" maxlength="50" :rules="[{ required: true, message: '请填写文章描述' }]" placeholder="请输入文章描述" show-word-limit />
        <van-field name="是否匿名" label="是否匿名">
          <template #input>
            <van-radio-group v-model="articleParams.real" direction="horizontal">
              <van-radio name="1" checked-color="#ee0a24">否</van-radio>
              <van-radio name="0" checked-color="#ee0a24">是</van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin:16px">
        <editor ref="editorEl" @editChange="getEdit"></editor>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script lang="ts">
import { msgFn } from 'src/utils';
import {
    addArticle,
    addComment,
    addReply
} from 'src/plugins/http/server/article/index';
import editor from 'src/components/editor/index.vue';
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Toast } from 'vant';

export default {
    'name': 'add',
    'components': {
        editor
    },
    setup() {
        const $router = useRouter();
        const $route = useRoute();
        const articleParams = reactive({
            'tagId': '',
            'tagName': '',
            'title': null,
            'des': null,
            'real': '1',
            'detail': ''
        });
        const showPicker = ref(false);

        const editorEl = ref();

        const onConfirm = (value: tagObj) => {
            articleParams.tagId = value.id;
            articleParams.tagName = value.value;
            showPicker.value = false;
        };

        const getEdit = (html: string) => {
            articleParams.detail = html;
        };
        const addTopic = () => {
            if (!articleParams.detail) {
                msgFn('请填写内容！', 'danger');
                return false;
            }
            if ($route.params.type === '1') {
                addArticle({
                    'data': articleParams,
                    'opts': { 'isLoading': '1' }
                })
                    .then((res: any) => {
                        if (res.code === 200) {
                            msgFn('发布成功', 'success');
                            articleParams.tagId = '';
                            articleParams.title = null;
                            articleParams.des = null;
                            articleParams.real = '1';
                            articleParams.detail = '';
                            editorEl.value.insert('');
                            setTimeout(() => {
                                Toast.clear();
                                $router.go(-1);
                            }, 2001);
                        }
                    })
                    .catch(e => {
                        msgFn(e);
                    });
            } else if ($route.params.type === '2') {
                addComment({
                    'data': {
                        'detail': articleParams.detail,
                        'articleId': $route.params.id,
                        'targetId': $route.params.targetId,
                        'real': articleParams.real
                    },
                    'opts': { 'isLoading': '1' }
                })
                    .then((res: any) => {
                        if (res.code === 200) {
                            msgFn('发布成功', 'success');
                            articleParams.tagId = '';
                            articleParams.title = null;
                            articleParams.des = null;
                            articleParams.real = '1';
                            articleParams.detail = '';
                            editorEl.value.insert('');
                            setTimeout(() => {
                                Toast.clear();
                                $router.go(-1);
                            }, 2001);
                        }
                    })
                    .catch(e => {
                        msgFn(e);
                    });
            } else if ($route.params.type === '3') {
                addReply({
                    'data': {
                        'detail': articleParams.detail,
                        'commentId': $route.params.id,
                        'targetId': $route.params.targetId,
                        'real': articleParams.real
                    },
                    'opts': { 'isLoading': '1' }
                })
                    .then((res: any) => {
                        if (res.code === 200) {
                            msgFn('发布成功', 'success');
                            articleParams.tagId = '';
                            articleParams.title = null;
                            articleParams.des = null;
                            articleParams.real = '1';
                            articleParams.detail = '';
                            editorEl.value.insert('');
                            setTimeout(() => {
                                Toast.clear();
                                $router.go(-1);
                            }, 2001);
                        }
                    })
                    .catch(e => {
                        msgFn(e);
                    });
            }
        };
        const onSubmit = () => {
            addTopic();
        };
        return {
            articleParams,
            showPicker,
            editorEl,
            getEdit,
            addTopic,
            onSubmit,
            onConfirm
        };
    }
};
</script>
<style lang='less' scoped>
.editorBox {
  overflow: auto;
  width: 100%;
  position: fixed;
  padding-top: 20px;
  background: #f7f8fa;
  top: 0px;
  bottom: 53px;
  height: auto; /*如设置bottom:50px,则需height:auto才能生效*/
}
</style>